<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      >

    <h:head>
        <title>TLS WebShowCase - Đăng nhập</title>
        <link rel="stylesheet" type="text/css"
              href="#{request.contextPath}/resources/css/logincss.css" />
    </h:head>
    <h:body class="login-body-bg">
        <p:growl showDetail="true" id="grow_main_dt" />

        <div id="wrapper" style="padding: 0px; background: transparent">
            <div  id="header" class="login-header-bg">
                <div id="logo" style="width: 367px; margin: 0 auto;">
                </div>
            </div>            

            <div id="content">
                <div id="box-login">
                    <h:form id="form_login">
                        <div id="login-key" class="left" />
                        <div class="left" >
                            <p:focus context="form_login" />
                            <h:panelGrid columns="1">  
                                <p:inputText requiredMessage="Chưa nhập tài khoản" value="#{secuser.username}" id="username" required="true" label="Account" /> 
                                <p:password requiredMessage="Chưa nhập mật khẩu" value="#{secuser.password}" id="password" required="true" label="Password" />  
                            </h:panelGrid> 
                            <p:watermark for="username" value="Your Account" />
                            <p:watermark for="password" value="Your Password" />
                        </div>
                        <div class="left">
                            <p:commandButton image="arrow" action="#{secuser.validateUser()}" styleClass="login-btn" process="form_login" id="loginButton" update=":grow_main_dt form_login"  /> 
                        </div>
                    </h:form> 
                </div>
            </div>

            <p:ajaxStatus styleClass="ajax-status" id="ajaxStatusPanel">
                <f:facet name="start">
                    <h:graphicImage value="/resources/images/ajax-loader-login.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:graphicImage value="/resources/images/done-login.png" />
                </f:facet>
            </p:ajaxStatus>
        </div>
    </h:body>
</html>